<template>
    <!-- 登陆/注册点击按钮 -->
    <div class="mainIndex">
      <router-link class="login commonBox" to="/login" > 
        <span>
          登&nbsp;&nbsp;陆
        </span>
      </router-link>
      <router-link class="regis commonBox" to="/register" >
        <span>注&nbsp;&nbsp;册</span>
      </router-link>

      <div class="other">
          <span>其&nbsp;他&nbsp;登&nbsp;陆&nbsp;方&nbsp;式</span>
          <div>
            <a><img src="../../../images/qq.gif" alt=""></a>
            <a><img src="../../../images/weicat.gif" alt=""></a> 
          </div>
      </div>
    </div>
</template>

<script>
export default {
    
}
</script>

<style lang="scss" scoped>
.mainIndex{
  width: 100%;
  height: 100%;
  margin-top: 10%;
  .commonBox{
      display: block;
      &.login{
          margin-left: 25%;
      }
      &.regis{
          margin-top:40px;
          margin-left:  25%;
      }
  }
  .other{
    position: relative;
    top:150px;
    span{
      display:inline-block;
      width:40%;
      color: #fff;
      font-size: 16px;
      font-family: 'Microsoft Yahei';
      text-align: center;
      margin-left:  25%;
    }
    span:before,span:after{
      content: '';                 /*CSS伪类用法*/
      position: absolute;         /*定位背景横线的位置*/
      top: 52%;
      background: #fff;       /*宽和高做出来的背景横线*/
      width: 10%;
      height: 1px;
    }
    span:before{
      left: 25%;        /*调整背景横线的左右距离*/
    }
    span::after{
      right: 35%;        /*调整背景横线的左右距离*/
    }
    div{
      display: flex;
      position:absolute;
      left: 25%;
      top:40px;
      width:40%;
      // text-align: center;
      justify-content: center;
      a{
        display: inline-block;
        width:20%;
        height: 20%;
        &:nth-child(1){
          margin-left: 0%;
        }
        &:nth-child(2){
          margin-left: 11%;
        }
        img{
          width: 100%;
          height: 100%;
        }
      } 
    }    
  }
}
</style>